<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="获取" id="getBtn">
    <input type="button" value="设置" id="setBtn">
    <div id="div1">我是一个div标签
        <p>我是一个p标签 <span>span1</span></p>
    </div>
    <div>我是一个div2标签
        <p>我是一个p2标签 <span>span2</span></p>
    </div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //1.text(); 获取和设置文本



            // 1.获取文本：text()方法不给参数
            $('#getBtn').click(function () {
                //2.获取id为div1这个标签的文本
                //会获取到这个标签所有的文本,包括后代选择器的文本
                // console.log($('#div1').text());     



                //2.1获取标签为div的元素的文本
                //包含了多个dom元素的jQuery对象,通过text()方法获取文本，会把所有dom元素的文本获取到
                console.log($('div').text());
            });
            //2.设置文本: text()方法给参数，参数就是要设置的文本
            $('#setBtn').click(function () {
             //2.给id为div1的这个标签设置文本
             //会覆盖他原来的内容，如果设置的文本中包含标签，是不会把这个标签给解析出来的.
             $('#div1').text('我是新设置的文本');
             $('#div1').text('我是新设置的文本<a>我是链接</a>');


             //2.2给标签为div的元素设置文本
             //包含了多个dom元素的jQuery对象，通过text()方法设置文本,会把所有的dom元素都设置上
             $('div').text('设置的文本');  //隐式迭代
             
            });
        })

    </script>
</body>

</html>